<template>
  <view v-if="userInfo">
    <view class="avatar-wrapper" style="background-color: #2D96FF !important;">
      <image class="bg" src="/static/icon/mine-bg.png"></image>
      <view class="avatar-infos fr-c">
        <view class="avatar">
          <image v-if="userInfo.avatar" class="icon" :src="'https://xt.vipsups.com/'+userInfo.avatar" mode="aspectFill"></image>
          <image v-else class="icon" src="/static/icon/avatar.png" mode="aspectFill"></image>
        </view>
        <view class="info-box">
          <view class="bt u-m-b-20">{{userInfo.nickname}}</view>
          <view>{{userInfo.user_type == 3 ? '维修工' : '保洁'}}</view>
        </view>
        <view class="exit" @click="exit">退出</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo:null,
        pup_type:1, // 1-密码， 2-门锁
        password:'', // 新密码
        show:false,
        password_type:false,
        showFile:false,
        form: {
        	avatar: '',
        	username: '',
        	nickname: '',
        },
        url:'', // 头像
        clickSubmit:false,
        
        showMensuo:false
      }
    },
    onLoad() {
      // #ifdef MP-WEIXIN
      uni.hideHomeButton()
      // #endif
    },
    onShow() {
      // this.userInfo = this.$store.state.vuex_user;
      // `user_type`   '''3''=>''工程师''，''2''=>"保洁",''1''=>"销售", ''0''=>"普通会员"',
      if(uni.getStorageSync('userinfo')){
        this.userInfo = JSON.parse(uni.getStorageSync('userinfo'))
        if(!this.userInfo){
          uni.switchTab({
            url:'/pages/index/index'
          })
        }
      }
      
    },
    methods:{
      exit(){
        uni.removeStorageSync('token');
        uni.removeStorageSync('userinfo');
        uni.switchTab({
          url:'/pages/index/index'
        })
      },
      getShowMensuo(e){
        this.showMensuo = e
      },
      getCon(){
        this.$api.getUserIndex({}).then(res=>{
          uni.hideLoading()
          if(!res.code) return
          this.userInfo = res.data.userInfo;
          this.form =  {
            avatar: '',
            username: '',
            nickname: '',
          }
          if(this.userInfo.is_update == 0){
            this.showFile = true
          }
        })
      },
      onChooseAvatar(e) {
      	this.$api.goUpload({
      		filePath: e.detail.avatarUrl,
      		name: 'file',
      	}).then(res => {
      		this.url = res.data.fullurl;
      		this.form.avatar = this.url;
      	});
      },
      onInput(e) {
      	this.form.nickname = e.detail.value;
      },
      submit(){
        this.clickSubmit = true
        if(!this.url || !this.form.nickname) return
        const data = {...this.form, avatar : this.form.avatar === this.userInfo.avatar ? '' : this.form.avatar}
        this.$api.getUserProfile({...data, username: data.nickname}).then(res=>{
          this.$u.toast(res.msg);
          this.getCon()
        })
        
        this.showFile = false
      },
      
      doorShow(item){
        this.$refs.doorRef.showFun(item)
      },
    }
  };
</script>

<style lang="scss" scoped>
  page {
    background-color: #f4f6f8;
    overflow: hidden;
  }
  .text-danger{color: red; font-size:20rpx; height: 80rpx;
    &.hide{opacity: 0 !important; font-size:0px;}
  }
  /deep/.u-mode-center-box{border-radius: 10rpx;}
  /deep/.avatar-wrapper{background-color: #f5f5f5 !important;}
  .zxb-pup{
    border-radius: 10rpx; width: 690rpx; background-color: #fff; overflow: hidden; padding: 0 30rpx 50rpx;
    .nickname{border:1px solid #ccc; padding: 0 10rpx; height: 80rpx; border-radius: 6rpx; margin: 20rpx 0 40rpx; display: block; text-align: center;}
    .title{font-size: 30rpx; padding: 30rpx 0; font-weight: bold; line-height: 60rpx;}
    .btn{width: 70%; margin: 0 auto; display: block;}
  }
  
  
  
  .avatar-wrapper {
    background-color: #2D96FF; display: flex; align-items: center;
    padding-top: 98rpx;
    position: relative;
    .bg {
      height: 162rpx;
      width: 100%;
    }
    .avatar-infos {
      box-sizing: border-box; color: #FFFFFF;
      padding: 0 36rpx;
      position: absolute;
      top: 50%; transform: translateY(-50%);
      left: 0;
      width: 100%;
      .avatar {
        margin-right: 20rpx;
        .icon {
          width: 136rpx;
          height: 136rpx;
          border-radius: 50%;
          display: block;
        }
      }
      .info-box {
        flex: 1;
        .bt {
          font-size: 40rpx;
          color: #FFFFFF;
          font-weight: bold;
          line-height: 56rpx;
          margin-bottom: 6rpx;
        }
        .tag {
          width: 120rpx;
          height: 48rpx;
          line-height: 48rpx;
          text-align: center;
          background: #2A70F9;
          border-radius: 26rpx;
          font-size: 24rpx;
          color: #FFFFFF;
          &.no-tag {
            background-color: #ddd;
          }
        }
      }
    }
  }
  
  .jiaofei{
    margin: 20rpx auto 0;
    width: 690rpx; border-radius: 16rpx; background-color: #FFFFFF;
    .item{
      padding: 20rpx 30rpx; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
    }
    .w100{width: 100%;}
    .lab{padding: 6rpx 0; font-size: 28rpx;}
    .title{font-size: 32rpx; color: #000;}
    .btn{border-radius: 8rpx; width: 100rpx; height: 50rpx; @include flex(row,center,center); margin-left: 10rpx; font-size: 26rpx;}
    .btn1{border:1px solid #ededed; background-color: rgba(45, 150, 255,0.2);}
    .btn2{border:1px solid #2D96FF; background-color: #2D96FF; color: #fff;}
  }
  
  .order-menu {
    margin: 30rpx auto;
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    @include flex;
    overflow: hidden; flex-wrap: wrap !important; padding:20rpx 0 10rpx; justify-content: flex-start !important;
    .item {
      @include flex(column);
      height: 100%; padding: 20rpx 0 ;
      width: 33.33%;
      .icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 20rpx;
      }
      .name {
        font-size: 30rpx;
        color: #282828;
        text-align: center;
      }
    }
  }

  .tool-box {
    width: 690rpx;
    background: #FFFFFF;
    border-radius: 16rpx;
    margin: 30rpx auto;
    .bt {
      font-size: 30rpx;
      font-weight: bold;
      color: #282828;
      line-height: 40rpx;
      padding: 30rpx 30rpx 56rpx;
      box-sizing: border-box;
    }
    .list {
      @include flex(row,flex-start,flex-start);
      flex-wrap: wrap;
      height: auto !important;
      .item {
        width: 25%; margin-bottom: 26rpx;
        @include flex(column);
        .icon {
          width: 52rpx;
          height: 52rpx;
          margin-bottom: 10rpx;
        }
        .name {
          font-size: 30rpx;
          line-height: 40rpx;
          text-align: center;
        }
      }
    }
  }
  .pup{
    background-color: #fff; padding: 30rpx; padding-bottom: 20rpx;
    .title{padding-bottom: 30rpx; border-bottom: 1px solid #ddd; margin-bottom: 30rpx; font-weight: bold;}
    .text{border: 1px solid #ddd; border-radius: 10rpx; padding: 0 20rpx !important; display:block; margin-bottom: 20rpx;}
    
  }
</style>